<template>
    <div class="register">
        <h1>Register</h1>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="phone">Phone:</label>
                <input type="text" id="phone" v-model="form.phone" required />
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" v-model="form.email" required />
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" v-model="form.password" required />
            </div>
            <div class="form-group">
                <label for="coreRole">Core Role:</label>
                <select id="coreRole" v-model="form.coreRole" required>
                    <option value="patient">Patient</option>
                    <option value="doctor">Doctor</option>
                </select>
            </div>
            <button type="submit">Register</button>
        </form>
    </div>
</template>

<script>

import { register } from '@/api/user'; // Adjust the import path as necessary

export default {
    data() {
        return {
            form: {
                userId: localStorage.getItem("id"), // Assuming you have a userId field in your form if you're updating an existing user'
                phone: '',
                email: '',
                password: '',
                coreRole: '',
            },
        };
    },
    methods: {
        async handleSubmit() {
            console.log('Form submitted:', this.form);
            const response = await register(this.form);
            if (response.id !== null) {
                // Registration successful, handle response data
                
                alert('Registration successful!');
                localStorage.setItem("phone", this.form.phone); // Assuming you want to store the phone number in localStorage
                localStorage.setItem("email", this.form.email); // Assuming you want to store the email in localStorage
                localStorage.setItem("coreRole", this.form.coreRole); // Assuming you want to store the core role in localStorage 


                if (this.form.coreRole === 'doctor') {//this.$router.push({ name: 'Register' });
                    this.$router.push({ name: 'Doctor' });
                } else if (this.form.coreRole === 'patient') {
                    this.$router.push({ name: 'Patient' });
                }
            } else {
                // Handle registration failure
                alert('Registration failed. Please try again.');
            }
        },
    },
};
</script>

<style scoped>
.register {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input,
select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
</style>